<template>
  <!-- web -->
  <el-row :gutter="0" class="hidden-xs-only">
    <div class="header">
      <div class="textCenter box_header">
        <img class="header_img" :src="data.logoUrl" alt="">
      </div>
      <div class="flexWrapCenter box_menu" id="box_menu">
        <div class="textCenter header_menu marginB5"
          :class="data.gameType == item.value ? 'selectColor an_breathe' : ''" v-for="(item, index) in GameType"
          @click="chooseType(item.value)">
          <div class="box_item textCenter"><img :src="item.icon" alt=""></div>
          <p>{{ item.label }}</p>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'
import { GameType, LogoUrl } from '@/config/eunm'
import { selectToLabel, getOperatorInfo } from '@/utils/index'

const props = defineProps({
  type: {
    type: Number,
    default: () => {
      return 0
    }
  },
})

const data = reactive({
  gameType: 1,
  logoUrl:selectToLabel(LogoUrl,getOperatorInfo(location.hostname)),
})

const emit = defineEmits(['query'])
watch(
  () => data.gameType,
  (to) => {
    emit('query', data.gameType)
  },
  { deep: true, immediate: true }
)

watch(
  () => props.type,
  async (value) => {
    chooseType(value)
  }
)

// 选择游戏类型
const chooseType = (value: any) => {
  // 设置滚动条高度
  data.gameType = value
  var element = document.getElementById('box_menu') as any;
  if (value > 7) {
    element.scrollTop = 1200
  } else {
    element.scrollTop = 0
  }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'Graphik';
  src: url(@/assets/font/Graphik-Semibold-09.otf);
  font-weight: normal;
  font-style: normal;
}
.header_top{
  padding-top: 0px !important;
}
.header {
  width: 130px;
  height: 100% !important;
  padding-top: 30px;
  border-right: 2px solid #373c41;
  font-family: 'Graphik', sans-serif;
  font-size: 14;
  letter-spacing: 1px;
  font-weight: bold;
  overflow: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  background-color: var(--color-background);
  flex-direction: column;
}

.box_header {
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 100;

  .header_img {
    width: 105px;
    // height: 38px;
    position: fixed;
    top: 20;
    left: 5px;
  }
}

.box_menu {
  height: 90vh;
  padding-top: 20px;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .header_menu {
    padding: 15px;
    font-weight: bold;
    cursor: pointer;

    .box_item {
      padding: 6px 20px 3px 20px;
      border-radius: 35px;
      border: 2px solid var(--color-background);
      overflow: hidden;
    }

    img {
      width: 30px;
      height: 30px;
    }
  }

  .header_menu:hover {
    color: var(--color-select);

    .box_item {
      border: 2px solid var(--color-select);
      background-color: rgba(144, 244, 98, 0.2);
      box-shadow: 0.5px 0.5px 5px var(--color-select);

      img {
        transform: translateY(-40px);
        filter: drop-shadow(var(--color-select) 0 40px);
      }
    }
  }
}
</style>
